What?

Allows new directives to be registered at any time, even after processing and rendering data-wp-interactive regions.

Why?

This would be helpful with client-side navigation when some directives might not be needed on the initial page load. Also for custom directives that could get loaded from random files provided by extenders.

How?

Creating a reactive registry with the directive callbacks.

Testing Instructions

There are E2E tests, but this feature can be tested manually as well.

1. In a template you know contains interactive blocks, add a Custom HTML block with the following code:

   <button
     style="background-color:white"
     data-wp-interactive="test/async-directive"
     data-wp-context='{ "colors": [ "white", "magenta", "cyan", "yellow" ] }'
     data-wp-bg-color="context.colors"
   >Click me!</button>

2. Visit a page with that template and ensure the added button appears.
3. Click it. Nothing should happen.
4. Open the dev tools and execute the following code in the console. It registers a directive named bg-color.

   const { useState, useCallback, privateApis } = await import(
     "@wordpress/interactivity"
   );
   
   const { directive } = privateApis(
     "I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress."
   );
   
   directive(
     'bg-color',
     ( { directives: { 'bg-color': bgColor }, element, evaluate } ) => {
       const [ index, setIndex ] = useState( 0 );
       const entry = bgColor.find( ( { suffix } ) => suffix === 'default' );
       const colors = evaluate( entry );
   
       const clickHandler = useCallback(() => {
         setIndex( ( index + 1 ) % colors.length );
       }, [colors.length, index]);
   
   
       // Use mouseup event so this doesn't interfere with `data-wp-on--click`.
       element.props.onmouseup = clickHandler;
       element.props.style = { backgroundColor: colors[index] };
     }
   );

5. Click the button now. It should change the color.